<script setup>
import {onMounted, ref} from "vue";
import router from "../../router/router.js";
import {doGet, doPostForm} from "../../util/HttpClient.js";
import {ElMessage} from "element-plus";
//遮罩
let loading = ref(false)

let userTableData = ref([])

let totalPage = ref(1)

//页面加载读取第一页数据
onMounted(async ()=>{
  await loadUserPage(1)
})

//加载数据的函数
const loadUserPage = (pageNo) => {
  //显示遮罩
  loading.value = true
  doGet('/user/pageList',{pageNo:pageNo}).then((resp) =>{
    if (resp.data.code == 1000){
      ElMessage.success(resp.data.msg)
      totalPage.value = resp.data.data.page.totalPage
      userTableData.value = resp.data.data.list
    }
  }).finally(()=>{
    loading.value = false
  })
}

//显示新增离线商户页面
const onAddUser = () => {
  router.push({
    path:'/frame/user/edit'
  })
}

//修改商户信息
const onUserEdit = (row) => {
  router.push({
    path:'/frame/user/edit',
    query:{id:row.id}
  })
}

//修改商户状态
const onEditStatus = (row) => {
  doPostForm('/user/status', { userNo: row.userNo }).then((resp) => {
    if (resp.data.code == 1000) {
      ElMessage.success(resp.data.msg)
      loadUserPage(1)
    }
  })
}

//分页
const onPageChange = async (current) => {
  await loadUserPage(current)
}
</script>

<template>
  <div style="width: 100%; height: 50%" v-loading="loading">
    <el-container>
      <el-header height="2vh">
        <el-row :gutter="10">
          <el-col :span="1" :offset="0">
            <el-button type="success" size="small" @click="onAddUser">新增离线商户</el-button>
          </el-col>
        </el-row>
      </el-header>
      <el-main height="93vh">
        <el-table ref="userTable" :data="userTableData" border stripe style="width: 100%">
          <el-table-column prop="userNo" label="商户号" width="200" />
          <el-table-column prop="loginName" label="登录名称" width="140" />
          <el-table-column prop="accountNo" label="资金账号" width="200" />
          <el-table-column prop="phone" label="手机号" width="120" />
          <el-table-column prop="shopName" label="商户名称" width="160" />
          <el-table-column prop="shopScope" label="经营范围" width="200" />
          <el-table-column prop="userEmail" label="邮箱" width="180" />
          <el-table-column prop="status" label="状态" width="100" />
          <el-table-column prop="createTime" label="创建时间" width="160" />

          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" plain type="success" @click="onUserEdit(scope.row)"
              >修改</el-button
              >
              <el-button size="small" plain type="danger" @click="onEditStatus(scope.row)">{{
                  scope.row.status == '启用' ? '禁用' : '启用'
                }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer height="2vh">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0"></el-col>
          <el-col :span="8" :offset="0">
            <el-pagination
                background
                layout="prev, pager, next"
                :page-count="totalPage"
                :page-size="20"
                @current-change="onPageChange"
            />
          </el-col>
          <el-col :span="8" :offset="0"></el-col>
        </el-row>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>

</style>